<template>
<div >
<img id="result" src="#" width="200" height="200" >

<!-- 海报canvas -->
<canvas id="poster1" v-show="false" width="600" height="600" ></canvas>

<!-- 二维码 -->
<qrcanvas id="qrcode" v-show="false" 
	:options="{
  		cellSize: 8,
	    data: options.data,
  	}"></qrcanvas>

</div>	
</template>

<script>

import { mapGetters } from 'vuex';
const Qrcanvas = require('qrcanvas-vue');
import { imgUtil, imgUtil1 } from '../../util/util';

export default {
	name: 'qrcodevue',
	
	data () {
		return {
		  	imgsize : 70,
		  	size : 200,
		}
	},

	components: {
		Qrcanvas,
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
			'URL',
		]),
	},

	props: {
	    options: {
	      	type: Object,
	      	default : function () {
	      		return {
	      			img : this.URL.logoImg,
		      		data : 'dlq',
		      		name : 'dlq',
	      		}
	      	}
	    },
	    
	},

	methods : {
		async init(){

			const bili = 3;

			var canvas_poster = document.getElementById("poster1");
			var context = canvas_poster.getContext('2d');

			context.fillStyle = "#fff";
			context.fillRect(0,0,this.size * bili, this.size * bili); 

		  	var canvas_qrcode = document.getElementById("qrcode");
		  	var img_qrcode = canvas_qrcode.toDataURL("image/png");

			// console.log(this.options.img);
		 //  	var a1 = await imgUtil(this.options.img);
			//var a2 = await imgUtil(img_qrcode);
			var a2 = null;
		  	try{
		  		a2 = await imgUtil(img_qrcode);
		  	}catch(err){
		  		console.log(err);
		  		a2 = await imgUtil1(img_qrcode);
		  	}

			// context.drawImage(a1, 105 * bili , 35 * bili, this.imgsize * bili , this.imgsize * bili );

			// context.font = (16 * bili) + "px 微软雅黑";
			// context.fillStyle = "#666";
			// context.textAlign="center";
			// context.fillText(this.options.name + ' 的邀请函', 140 * bili, 130 * bili);

			context.drawImage(a2, 0, 0, this.size * bili , this.size * bili );

			//context.fillText('扫描二维码，成为分销商', 140 * bili, 360 * bili);

			var image = document.getElementById("result");
			image.src = canvas_poster.toDataURL("image/png");

		},

	},

	watch:{
	    
	},

	mounted () {
		
		this.init();

	       
	},

}
</script>

<style scoped>
/*#poster1{
	width: 250px;
	height: 445px;
}*/
</style>
